<template>
  <el-container>
    <el-header height="40px" class="building-room">
      <div>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="add(false)"
        >新增</el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          :disabled="baseInfo.type === 'unit'"
          @click="batchAddVisible()"
        >批量新增</el-button>
        <el-button
          type="danger"
          :disabled="selection.length === 0"
          size="mini"
          icon="el-icon-delete"
          @click="remove()"
        >删除</el-button>
      </div>
      <el-pagination
        style="display: inline-block"
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="page.pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </el-header>
    <el-main style="height: calc(100vh - 210px); padding: 0">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="data"
        style="width: 100%;font-size: 12px;"
        height="calc(100vh - 210px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          width="50"
        />
        <el-table-column
          type="index"
          label="序号"
          align="center"
          min-width="30"
        />
        <el-table-column
          label="房屋名称"
          align="center"
          min-width="160"
        >
          <template slot-scope="scope">
            <!-- <a
              style="text-decoration: underline;color: #00adff;cursor: pointer;"
              @click="update(scope.row)"
            >{{ scope.row.room_name }}</a>-->
            <span>{{ scope.row.fnameL2 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="baseInfo.tree_type === 'building'"
          prop="fbuildunitid"
          label="单元名称"
          align="center"
          min-width="70"
        >
          <template slot-scope="scope">
            <!-- <span>{{ baseInfo.children && baseInfo.children.filter(v => v.index === scope.row.unit_index).length > 0 ?
              baseInfo.children.filter(v => v.index === scope.row.unit_index)[0].unit_name : '-' }}</span>-->
            <span>{{ scope.row.fbuildunitid }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="froompropno"
          label="房号"
          align="center"
          min-width="50"
        />
        <el-table-column
          prop="ffloor"
          align="center"
          label="层"
          min-width="50"
        />
        <el-table-column
          prop="fserialnumber"
          align="center"
          label="序号"
          min-width="50"
        />
        <el-table-column
          prop="room_type"
          align="center"
          label="产品类型"
          min-width="90"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.fproducttypeid | productType }}</span>
            <!--<span v-if="dictDataMap.hasOwnProperty('room_type')">{{ dictDataMap.room_type[scope.row.room_type] }}</span>-->
            <!--<span v-else>{{ scope.row.room_type }}</span>-->
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          align="center"
          label="业态"
          min-width="90"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.bussinessTypeName | '' }}</span>
            <!--<span v-if="dictDataMap.hasOwnProperty('room_type')">{{ dictDataMap.room_type[scope.row.room_type] }}</span>-->
            <!--<span v-else>{{ scope.row.room_type }}</span>-->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="销售类型"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.cfsaletypeid | saleType }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="froommodelid"
          align="center"
          label="建筑性质"
          min-width="80"
        >
          <template slot-scope="scope">
            <!--<span v-if="dictDataMap.hasOwnProperty('remodelling_type')">{{ dictDataMap.remodelling_type[scope.row.remodelling_type] }}</span>-->
            <span>{{ scope.row.fbuildingpropertyid | buildingProperty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-edit" @click="update(scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" size="mini" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-dialog
      :title="form.fid ? '修改房屋' : '新增房屋'"
      :visible.sync="dialogVisible"
      top="5vh"
      width="800px"
      :append-to-body="true"
      :close-on-click-modal="false"
      center
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        size="small"
        :rules="rules"
        style="width: 100%"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item v-if="baseInfo.type === 'building'" label="楼栋">
              <el-input v-model="form.building_name" disabled placeholder="楼栋" />
            </el-form-item>
            <el-form-item v-else label="单元">
              <el-input v-model="form.unit_name" disabled placeholder="单元" />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房屋名称" prop="fnameL2">
              <el-input v-model="form.fnameL2" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房号" prop="froompropno">
              <el-input v-model="form.froompropno" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="楼层" prop="ffloor">
              <el-input-number
                v-model="form.ffloor"
                controls-position="right"
                style="width: 100%"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="层高" prop="ffloorheight">
              <el-input v-model="form.ffloorheight" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品类型" prop="fproducttypeid">
              <el-select v-model="form.fproducttypeid" filterable placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictData.producttypeEnum"
                  :key="item.fid"
                  :label="item.fnameL2"
                  :value="item.fid"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售类型" prop="cfsaletypeid">
              <el-select v-model="form.cfsaletypeid" filterable placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictData.saleTypeEnum"
                  :key="item.fid"
                  :label="item.fnameL2"
                  :value="item.fid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="建筑性质" prop="fbuildingpropertyid">
              <el-select v-model="form.fbuildingpropertyid" filterable placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in dictData.buildingPropertyEnum"
                  :key="item.fid"
                  :label="item.fnameL2"
                  :value="item.fid"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="序号" prop="fserialnumber">
              <el-input-number
                v-model="form.fserialnumber"
                controls-position="right"
                style="width: 100%"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持有年限" prop="cfselfholdyear">
              <el-input-number
                v-model="form.cfselfholdyear"
                controls-position="right"
                style="width: 100%"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="" prop="cfisproperty">
              <el-checkbox v-model="form.cfisproperty" :true-label="1" :false-label="0">是否有产权</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" prop="cfiswholesale">
              <el-checkbox v-model="form.cfiswholesale" :true-label="1" :false-label="0">是否整售</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="实测建筑面积" prop="factualbuildingarea">
              <el-input v-model="form.factualbuildingarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实测套内面积" prop="factualroomarea">
              <el-input v-model="form.factualroomarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分摊面积" prop="fapportionarea">
              <el-input v-model="form.fapportionarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阳台面积" prop="fbalconyarea">
              <el-input v-model="form.fbalconyarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="建筑面积" prop="fbuildingarea">
              <el-input v-model="form.fbuildingarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车库面积" prop="fcarbarnarea">
              <el-input v-model="form.fcarbarnarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="平台面积" prop="fflatarea">
              <el-input v-model="form.fflatarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="花园面积" prop="fguardenarea">
              <el-input v-model="form.fguardenarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="套内面积" prop="froomarea">
              <el-input v-model="form.froomarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用面积" prop="fusearea">
              <el-input v-model="form.fusearea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: right;margin-top: 20px;padding-right: 30px;">
          <el-button type="primary" @click="commonSubmit()">保存</el-button>
          <el-button type="warning" @click="cancel">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog
      title="批量新增房屋"
      :visible.sync="dialogVisibleBatch"
      top="5vh"
      width="1200px"
      :append-to-body="true"
      center
    >
      <BatchAddRoom
        v-if="dialogVisibleBatch"
        ref="batchAddRoom"
        :dict-data="dictData"
        :base-info="baseInfo"
        menu-align="right"
        @onSuccess="onSuccess"
      />
    </el-dialog>
  </el-container>
</template>

<script>
import BatchAddRoom from './BatchAddRoom'
import { listRoom, initRoom, addRoom, updateRoom, delRoom } from '@/api/baseManage/houseManage'
let dictData = {
  buildingPropertyEnum: [],
  producttypeEnum: [],
  saleTypeEnum: []
}
const form = {
  building_name: '',
  unit_name: '',
  fnameL2: '',
  froompropno: '',
  ffloor: '',
  ffloorheight: '',
  fproducttypeid: '',
  cfsaletypeid: '',
  fbuildingpropertyid: '',
  fserialnumber: '',
  cfselfholdyear: '',
  cfisproperty: 0,
  cfiswholesale: 0,
  factualbuildingarea: '',
  factualroomarea: '',
  fapportionarea: '',
  fbalconyarea: '',
  fbuildingarea: '',
  fcarbarnarea: '',
  fflatarea: '',
  fguardenarea: '',
  froomarea: '',
  fusearea: ''
}
export default {
  name: 'BuildingRoom',
  components: {
    BatchAddRoom
  },
  filters: {
    productType(val) {
      for (let i = 0; i < dictData.producttypeEnum.length; i++) {
        if (dictData.producttypeEnum[i].fid === val) {
          return dictData.producttypeEnum[i].fnameL2
        }
      }
      return val
    },
    saleType(val) {
      for (let i = 0; i < dictData.saleTypeEnum.length; i++) {
        if (dictData.saleTypeEnum[i].fid === val) {
          return dictData.saleTypeEnum[i].fnameL2
        }
      }
      return val
    },
    buildingProperty(val) {
      for (let i = 0; i < dictData.buildingPropertyEnum.length; i++) {
        if (dictData.buildingPropertyEnum[i].fid === val) {
          return dictData.buildingPropertyEnum[i].fnameL2
        }
      }
      return val
    }
  },
  props: {
    baseInfo: { type: Object, default() { return {} } }
  },
  data() {
    return {
      // permission: window.qx_permissions.system.building,
      /* 窗口开关标识 */
      dialogVisible: false,
      /* 批量新增*/
      dialogVisibleBatch: false,
      /* 选择户型窗口开关标识*/
      dialogVisible2: false,
      /* 是否批量新增 */
      batchAdd: false,
      /* 列表数据 */
      data: [],
      page: {
        pageNum: 1,
        pageSize: 10
      },
      /* 总条数 */
      total: 0,
      /* 字典数据 */
      dictData: {
        buildingPropertyEnum: [],
        producttypeEnum: [],
        saleTypeEnum: []
      },
      /* 字典映射数据 */
      dictDataMap: {},
      /* 房屋数据 */
      roomForm: {},
      /* 选中的行 */
      selection: [],
      form: { ...form },
      rules: {
        fnameL2: [
          { required: true, message: '请输入房屋名称', trigger: 'blur' }
        ],
        froompropno: [
          { required: true, message: '请输入房号', trigger: 'blur' }
        ],
        fproducttypeid: [
          { required: true, message: '请选择产品类型', trigger: 'change' }
        ],
        cfsaletypeid: [
          { required: true, message: '请选择销售类型', trigger: 'change' }
        ],
        fbuildingpropertyid: [
          { required: true, message: '请选择装建筑性质', trigger: 'change' }
        ],
        fserialnumber: [
          { required: true, message: '序号不能为空', trigger: 'blur' }
        ]
      },
      listLoading: false
    }
  },
  watch: {
    'baseInfo.fid'(val) {
      this.fetchData()
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
     * 新增
     * @param batch 是否批量
     */
    add(batch) {
      this.batchAdd = batch
      this.dialogVisible = true
      if (this.baseInfo.type === 'building') {
        this.form.fbuildingid = this.baseInfo.fid
        this.form.building_name = this.baseInfo.fnameL2
      } else {
        this.form.fbuildingid = this.baseInfo.fbuildingid
        this.form.fbuildunitid = this.baseInfo.fid
        this.form.unit_name = this.baseInfo.fnameL2
      }
      if (!batch) {
        this.$nextTick(() => {
          this.$refs.buildingRoomDetail.form = Object.assign(this.$refs.buildingRoomDetail.form, this.roomForm)
          console.log(this.$refs.buildingRoomDetail.form)
        })
      }
    },
    /**
     * 保存表单
     */
    commonSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = this.form
          if (data.fid) {
            updateRoom(data).then(rv => {
              this.dealResponse(rv, '修改')
            })
          } else {
            addRoom(data).then(rv => {
              this.dealResponse(rv, '保存')
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * 处理返回对象
     * @param res 返回对象
     * @param method 方式
     */
    dealResponse(res, method) {
      if (res.code === 200) {
        this.onSuccess()
        this.$message.success(`${method}成功`)
      } else {
        this.$message.error(res.msg ? res.msg : `${method}失败`)
      }
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.form.resetFields()
      this.form = { ...form }
    },
    /**
     * 批量新增
     */
    batchAddVisible() {
      this.dialogVisibleBatch = true
    },
    update(row) {
      this.batchAdd = false
      this.dialogVisible = true
      this.form = { ...row }
      if (this.baseInfo.type === 'building') {
        this.form.building_name = this.baseInfo.fnameL2
      } else {
        this.form.unit_name = this.baseInfo.fnameL2
      }
    },
    /**
     * 删除
     * @param index
     */
    remove(row) {
      let ids = []
      if (!row) {
        ids = this.selection.map(v => v.fid)
      } else {
        ids = [row.fid]
      }
      this.$confirm('是否 删除 当前或所选房屋?', '删除房屋', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRoom(ids).then(rv => {
          if (rv.code === 200) {
            this.fetchData()
            this.$message.success('删除成功！')
          } else {
            this.$message.error(rv.msg ? rv.msg : '删除失败')
          }
        })
      }).catch(() => {
      })
    },
    batchSubmit(row) {
      this.$refs.batchAddRoom.submitForm()
    },
    onSuccess() {
      this.dialogVisible = false
      this.dialogVisibleBatch = false
      this.fetchData()
    },
    cancel() {
      this.dialogVisible = false
    },
    closeDialog() {
      this.resetForm()
    },
    fetchData() {
      this.data = []
      const params = Object.assign({}, this.page)
      if (this.baseInfo.type === 'building') {
        params.fbuildingid = this.baseInfo.fid
      } else {
        params.fbuildunitid = this.baseInfo.fid
      }
      if (!params.fbuildingid && !params.fbuildunitid) {
        return
      }
      this.listLoading = true
      listRoom(params).then(rv => {
        this.listLoading = false
        if (rv.code === 200) {
          this.total = rv.total
          this.data = rv.rows
          if (rv.total > 0) {
            if (!this.baseInfo.childType) {
              this.baseInfo.childType = 'room'
            }
          }
        }
      })
    },
    init() {
      this.dictData = {}
      initRoom().then(rv => {
        if (rv.code === 200) {
          this.dictData = rv.data
          dictData = { ...rv.data }
          // this.fetchData()
        }
      })
    },
    /**
     * 页数改变
     */
    handleSizeChange(size) {
      this.page.pageNum = 1
      this.page.pageSize = size
      this.fetchData()
    },
    /**
     * 当前页改变
     */
    handlePageChange(currentPage) {
      this.page.pageNum = currentPage
      this.fetchData()
    },
    /**
     * 选中改变
     * @param selection 选中的行
     */
    handleSelectionChange(selection) {
      this.selection = selection
    }
  }
}
</script>
<style scoped lang="scss">
  .building-room {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 108, 169, 0.5);
    padding: 0 0 10px;
  }
</style>
